<template>
  <div class="loading">
    <fx-card title="基础用法">
      <div class="box" v-loading="baseLoading">
        <h2>Five_Xu_UI_Plus</h2>
        <p>由Vue3.0搭建,FiveXu独立完成,仅参考ElementUI css样式</p>
      </div>
      <fx-button @click="baseLoading=!baseLoading" class="mt20">{{ baseLoading ? '关闭' : '开启' }}</fx-button>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义">
      <div class="box" v-loading="customizeLoading" fx-loading-text="加载中..." fx-loading-color="hsla(0,0%,100%,.9)"
           fx-loading-text-color="#f60">
        <h2>Five_Xu_UI_Plus</h2>
        <p>由Vue3.0搭建,FiveXu独立完成,仅参考ElementUI css样式</p>
      </div>
      <fx-button @click="customizeLoading=!customizeLoading" class="mt20">
        {{ customizeLoading ? '关闭' : '开启' }}
      </fx-button>
      <template #hide>
        <pre v-highlight="customize"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="整屏加载">
      <div v-loading.full="fullLoading" fx-loading-type="rainbow"></div>
      <fx-button @click="directiveClick" class="mr20" type="primary">
        指令全屏
      </fx-button>
      <fx-button @click="serverClick" type="primary">
        服务全屏
      </fx-button>
      <template #hide>
        <pre v-highlight="full"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { FxLoading } from '@/base'

export default defineComponent({
  name: 'viewLoading',
  setup () {
    const baseLoading = ref<boolean>(true)
    const customizeLoading = ref<boolean>(true)
    const fullLoading = ref<boolean>(false)

    const directiveClick = () => {
      fullLoading.value = true
      setTimeout(() => {
        fullLoading.value = false
      }, 2000)
    }
    const serverClick = () => {
      const loaded = FxLoading({
        text: '自定义文字/颜色/loadingIcon',
        textColor: '#000',
        bgColor: 'rgba(255,255,0,.5)',
        loadingType: 'rainbow'
      })
      setTimeout(() => {
        loaded.close()
      }, 2000)
    }

    const base = `<div class="box" v-loading="baseLoading">
  <h2>Five_Xu_UI_Plus</h2>
  <p>由Vue3.0搭建,FiveXu独立完成,仅参考ElementUI css样式</p>
</div>
<fx-button @click="baseLoading=!baseLoading" class="mt20">{{ baseLoading ? '关闭' : '开启' }}</fx-button>`

    const customize = `<div class="box" v-loading="customizeLoading" fx-loading-text="加载中..." fx-loading-color="hsla(0,0%,100%,.9)"
     fx-loading-text-color="#f60">
  <h2>Five_Xu_UI_Plus</h2>
  <p>由Vue3.0搭建,FiveXu独立完成,仅参考ElementUI css样式</p>
</div>
<fx-button @click="customizeLoading=!customizeLoading" class="mt20">
  {{ customizeLoading ? '关闭' : '开启' }}
</fx-button>`

    const full = `<div v-loading.full="fullLoading" fx-loading-type="rainbow"></div>
<fx-button @click="directiveClick" class="mt20">
  指令全屏
</fx-button>
<fx-button @click="serverClick" class="mt20">
  服务全屏
</fx-button>

import GlobalLoading from '@/base/directive/loading/globalLoading'

export default defineComponent({
    setup() {
      const fullLoading = ref<boolean>(false)

      const directiveClick = () => {
        fullLoading.value = true
        setTimeout(() => {
          fullLoading.value = false
        }, 2000)
      }
      const serverClick = () => {
        const loaded = FxLoading({
          text: '自定义文字/颜色/loadingIcon',
          textColor: '#000',
          bgColor: 'rgba(255,255,0,.5)',
          loadingType: 'rainbow'
        })
        setTimeout(() => {
          loaded.close()
        }, 2000)
      }
    }
})`

    return {
      baseLoading,
      customizeLoading,
      fullLoading,
      base,
      customize,
      full,
      serverClick,
      directiveClick
    }
  }
})
</script>

<style scoped lang="scss">
.loading {
  .box {
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #2d8cf0;
    color: #fff;
  }
}
</style>
